<template>
    <div class="deposit">
        <ul class="add_account ">
            <li v-for="(item, key) in billList" :key="key" @click="tiaozhuan(item.path)">
                <span>{{item.name}}</span>
                <div class="xinxi">
                    <b v-if="item.name == '添加/修改提现账号'">{{alipayIds}}</b>
                    <i class="icon iconfont icon-youjiantou f32"></i>
                </div>
            </li>
        </ul>
        <ol class="exhibition">
            <li>
                <span class="f30">账户总金额</span>
                <b class="f30">￥{{money.all_mony}}</b>
            </li>
            <li>
                <span class="f30">可提现金额</span>
                <b class="f30">￥{{money.cash_mony}}</b>
            </li>
        </ol>
        <div class="btn">
            <button :disabled="!(isApply == '未提现')" class="f28" @click="apply_money_front()">{{isApply == '未提现' ? '确认提现' : isApply}}</button>
            <span>
                <i class="icon iconfont icon-tishi"></i>
                每月11日起可提现金额为上月及之前账号余额(≥50可提现)
            </span>
        </div>
        <div class="mark" v-if="isShow">
            <div class="mark_opetion">
                <ul class="mark_msg">
                    <li class="f26">
                        <span>提现账号：</span>
                        <b>{{alipayIds}}</b>
                    </li>
                    <li class="f26">
                        <span>提现账号姓名：</span>
                        <b>{{alipayNames}}</b>
                    </li>
                    <li class="f26">
                        <span>提现金额：</span>
                        <b>{{money.cash_mony ? money.cash_mony : 0}} 元</b>
                    </li>
                    <li class="tishi f26">
                        <i class="icon iconfont icon-tishi"></i>
                        请确认提现信息正确后在提现
                    </li>
                </ul>
                <div class="mark_btn">
                    <span @click="apply_money(false)">取消</span>
                    <span @click="apply_money(true)">确定</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'deposit',
        data() {
            return {
                billList: [
                    {
                        name: '添加/修改提现账号',
                        path: '/addAlipay?type=' + this.$route.query.type,
                    },
                    {
                        name: '提现明细',
                        path: '/detail?type=' + this.$route.query.type,
                    },
                ],
                money: {

                },
                alipayIds: '',
                alipayNames: '',
                isShow: false,
                isApply:false
            }
        },
        methods: {
            tiaozhuan(path) {
                this.$router.push({
                    path: path,
                })
            },
            is_apply() { // 是否已申请提现
                let params = {
                    userId: this.$store.state.userId,
                    targetType: this.$route.query.type
                }
                this.$http.fetchGet('is_apply', params).then(res => {
                    if(res.code == 200) {
                        this.isApply = res.data
                    } else {

                    }
                }, err => {

                })
            },
            tx_money() { // 获取总金额和可提现金额
                let params = {
                    userId: this.$store.state.userId,
                    targetType: this.$route.query.type
                }
                this.$http.fetchGet('tx_money', params).then(res => {
                    if(res.code == 200) {
                        this.money = res.data
                    }
                }, err => {
                    console.log(err)
                })
            },
            alipay_detail() { // 获取运行商或大师的支付宝账户
                let params = {
                    userId: this.$store.state.userId, 
                    targetType: this.$route.query.type,
                }
                this.$http.fetchGet('alipay_detail', params).then(res => {
                    if(res.code == 200) {
                        this.alipayIds = res.data.alipayID
                        this.alipayNames = res.data.alipayname
                    } else {
                        // this.$vux.toast.text('提现申请失败')
                    }
                }, err => {

                })
            },
            apply_money_front() { // 申请提现前
                let veryDay = new Date().getDate()
                if(veryDay <= 10) return this.$vux.toast.text('每月11日才可提现')
                if(this.money.cash_mony < 50) return this.$vux.toast.text('最低提现金额为50')
                if(!this.alipayIds) return this.$vux.toast.text('请先添加提现账户')
                this.isShow = true
            },
            apply_money(bool) { // 申请提现
                if(!bool) return this.isShow = false
                let params = {
                    userId: this.$store.state.userId,
                    targetType: this.$route.query.type,
                    totalMoney: this.money.cash_mony,
                    alipayID: this.alipayIds,
                    alipayName: this.alipayNames,
                    cash_way: 1
                }
                this.$http.fetchPost('apply_money', params).then(res => {
                    if(res.code == 200) {
                        this.$vux.toast.text('提现申请成功,请耐心等待审核')
                        this.isShow = false
                        this.is_apply()
                    } else {
                        this.$vux.toast.text('提现申请失败')
                        this.isShow = false
                    }
                }, err => {

                })
            }
        },
        mounted() {
            // this.billList[0].path = window.location.href.slice(window.location.href.indexOf('#') + 1);
            this.tx_money()
            this.alipay_detail()
            this.is_apply()
        }
    }
</script>

<style lang="less" scoped>
    .deposit{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #f2f2f2;
        box-sizing: border-box;
        .add_account{
            box-sizing: border-box;
            .mb(20);
            li{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .padd(0, 20);
                box-sizing: border-box;
                .lh(88);
                border-bottom: 1px solid #f2f2f2;
                background: #fff;
                .xinxi{
                    b{
                        font-weight: normal;
                    }
                    i.icon{
                        transform:scale(1.5);
                    } 
                }
            }
        }
        .exhibition{
            width: 100%;
            display: flex;
            .p(20);
            .pt(30);
            .pb(30);
            background: #fff;
            box-sizing: border-box;
            li{
                flex: 1;
                text-align: center;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                &:nth-child(1){
                    border-right: 1px solid #f2f2f2;
                }
                span{
                    .lh(88);
                }
                b{
                    .lh(88);
                }
            }
        }
        .btn{
            width: 100%;
            .padd(0, 20);
            .mt(80);
            box-sizing: border-box;
            button{
                width: 100%;
                .h(88);
                border: none;
                background: #189BEB;
                color: #fff;
                border-radius: 5px;
            }
            span{
                display: block;
                text-align: center;
                .mt(20);
                color: #999;
            }
        }
        .mark{
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.3);
            .mark_opetion{
                position: relative;
                width: 80%;
                .pb(88);
                background: #fff;
                border-radius: 5px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                .mark_msg{
                    width: 100%;
                    .padd(0, 20);
                    .lh(88);
                    box-sizing: border-box;
                    li{
                       span{
                            display: inline-block;
                            .w(200);
                        }
                        b{
                            font-weight: normal;
                        }
                        border-bottom: 1px solid #f2f2f2;
                    }
                    .tishi{
                        text-align: center;
                        color: #999;
                        border: none;
                    }
                }
                .mark_btn{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    display: flex;
                    span{
                        flex: 1;
                        text-align: center;
                        .lh(88);
                        border-top: 1px solid #f2f2f2;
                        &:last-child{
                            border-left: 1px solid #f2f2f2;
                            color: #189BEB;
                        }
                    }
                }
            }
        }
    }
</style>
